import React, { Component } from 'react';
import { createPortal } from 'react-dom';
import ReactEcharts from 'echarts-for-react';
import darkEchartsTheme from '../../config/theme/darkEchartsTheme';
import echarts from 'echarts';
import { Icon } from 'antd';
import globalStyles from '../../style/common.less';
const modalRoot = document.getElementById('dialog-root');

class LineChartPanel extends Component {
  constructor(props) {
    super(props);
    this.el = document.createElement('lineChart_panel');
    this.state = {
      chartOption: undefined,
      chartHeight: 280,
    };
  }
  UNSAFE_componentWillReceiveProps(nextProps) {
    if (nextProps.dataList !== this.props.dataList) {
      if (nextProps.dataList) {
        this.setChartData(nextProps);
      }
    }
  }
  componentDidMount() {
    modalRoot.appendChild(this.el);
    echarts.registerTheme('theme_name', darkEchartsTheme);
    this.setChartData(this.props);
  }
  setChartData(props) {
    const { dataConfig,title,dataList} = props;
    const {type,uniqueValue,timeSeries,chartData} =dataList;
    const { unit } = dataConfig;
    if(type==='single'){
      var dtTitle = unit ? `${uniqueValue+'   '+title} （单位：${unit}）` : `${uniqueValue+title}`;
      var option = {
        tooltip: {
          trigger: 'axis',
        },
        grid: {
          left: '15%',
        },
        xAxis: {
          type: 'category',
          axisTick: { show: false },
          splitLine:{show:false},
          boundaryGap: false,
          data: timeSeries,
        },
        yAxis: {
          type: 'value',
          axisLine: { show: true },
          axisTick: { show: false },
          splitLine:{show:false},
          axisLabel: {
            formatter: '{value}',
          },
        },
        series: [
          {
            name: uniqueValue,
            type: 'line',
            data: chartData,
            smooth:true,
            symbol: 'none',
            sampling: 'average',
            markPoint: {
              data: [{ type: 'max', name: '最大值' }],
            },
            areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#188df0'
                }, {
                    offset: 1,
                    color: '#83bff6'
                }])
            },
          }
        ],
      };
    }else{
      var dtTitle = unit ? `${'长三角 '+title} （单位：${unit}）` : `${'长三角 '+title}`;
      var option = {
        tooltip: {
          trigger: 'axis',
        },
        grid: {
          left: '15%',
        },
        legend: {
          icon: 'rect',
          data: ['上海','江苏', '浙江','安徽'],
        },
        xAxis: {
          type: 'category',
          axisTick: { show: false },
          splitLine:{show:false},
          boundaryGap: false,
          data: timeSeries,
        },
        yAxis: {
          type: 'value',
          axisLine: { show: true },
          axisTick: { show: false },
          splitLine:{show:false},
          axisLabel: {
            formatter: '{value}',
          },
        },
        series: [
          {
            name: '上海',
            type: 'line',
            smooth: true,
            lineStyle: {
              normal: {
                width: 1
              }
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(219, 50, 51, 0.3)'
                }, {
                  offset: 0.8,
                  color: 'rgba(219, 50, 51, 0)'
                }], false),
                shadowColor: 'rgba(0, 0, 0, 0.1)',
                shadowBlur: 10
              }
            },
            itemStyle: {
              normal: {
                color: 'rgb(219,50,51)'
              }
            },
            data: chartData.shanghaiArray,
          },
          {
            name: '江苏',
            type: 'line',
            smooth: true,
            lineStyle: {
              normal: {
                width: 1
              }
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(53, 166, 222, 0.3)'
                }, {
                  offset: 0.8,
                  color: 'rgba(53, 166, 222, 0.3)'
                }], false),
                shadowColor: 'rgba(0, 0, 0, 0.1)',
                shadowBlur: 10
              }
            },
            itemStyle: {
              normal: {
                color: 'rgb(53, 166, 222)'
              }
            },
            data: chartData.jiangsuArray,
          },
          {
            name: '浙江',
            type: 'line',
            smooth: true,
            lineStyle: {
              normal: {
                width: 1
              }
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(1, 185, 131, 0.3)'
                }, {
                  offset: 0.8,
                  color: 'rgba(1, 185, 131, 0)'
                }], false),
                shadowColor: 'rgba(0, 0, 0, 0.1)',
                shadowBlur: 10
              }
            },
            itemStyle: {
              normal: {
                color: 'rgb(1, 185, 131)'
              }
            },
            data: chartData.zhejiangArray,
          },
          {
            name: '安徽',
            type: 'line',
            smooth: true,
            lineStyle: {
              normal: {
                width: 1,
              },
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [
                    {
                      offset: 0,
                      color: 'rgba(246, 201, 0, 0.3)',
                    },
                    {
                      offset: 0.8,
                      color: 'rgba(246, 201, 0, 0)',
                    },
                  ],
                  false
                ),
                shadowColor: 'rgba(0, 0, 0, 0.1)',
                shadowBlur: 10,
              },
            },
            itemStyle: {
              normal: {
                color: 'rgb(246,201,0)',
              },
            },
            data: chartData.anhuiArray,
          },
        ],
      };
    }
    this.setState({dtTitle:dtTitle,chartOption: option});

  }

  render() {
    const { style, width, height } = this.props;
    const { chartOption, dtTitle } = this.state;
    return createPortal(
      <div
        style={{
          ...style,
          display: 'flex',
          flexDirection: 'column',
          width: width,
          height: height,
          color:'#fff',
          backgroundColor: 'rgba(0,0,0,0.6)',
          boxShadow: '0 1px 2px rgba(0,0,0,0.16), 0 1px 2px rgba(0,0,0,0.23)',
        }}
      >
        <div
          style={{
            lineHeight: '35px',
            height: 35,
            borderBottom:'1px solid rgb(238, 238, 238,0.2)',
            textAlign: 'center',
            fontWeight: 'bold'
          }}
        >
          <div style={{ float: 'left', marginLeft: 6,fontSize:15}}><div style={{float: 'left',width:5,height:35,marginRight: 10,backgroundColor: 'rgba(63,177,277,1)',}}/>{dtTitle}</div>
          <div style={{ float: 'right', marginRight: 8 }}>
            {/* <Icon
              type="close"
              className={`${globalStyles.cursor_style_pointer}`}
              style={{ fontSize: 18 }}
              onClick={this.props.onClose}
            /> */}
          </div>
        </div>
        <div style={{ margin: '3px 8px 3px 8px' }}>
          <div>
            {chartOption !== undefined && (
              <ReactEcharts
                option={chartOption}
                notMerge={true}
                lazyUpdate={true}
                theme={'theme_name'}
                style={{ height: this.state.chartHeight }}
              />
            )}
          </div>
        </div>
      </div>,
      this.el
    );
  }
}
export default LineChartPanel;
